<template>
  <svg
    xmlns="http://www.w3.org/2000/svg"
    width="48"
    height="48"
    viewBox="0 0 48 48"
  >
    <g
      fill="none"
      stroke="#0a8c32"
      stroke-linecap="round"
      stroke-linejoin="round"
      stroke-width="4"
    >
      <path
        d="M39 34V16a2 2 0 0 0-2-2H11a2 2 0 0 0-2 2v18a2 2 0 0 0 2 2h26a2 2 0 0 0 2-2M6 36h36M6 42h36"
      />
      <path
        d="M9 21h6v5h6v-5h6v8h6v-8h6M9 23v-4m30 4v-4m-6-5V8m-9 6V4m-9 10V8"
      />
    </g>
  </svg>
  <div style="height: 1em; width: 1em">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024">
      <path
        fill="currentColor"
        d="M160 160v704h704V160zm-32-64h768a32 32 0 0 1 32 32v768a32 32 0 0 1-32 32H128a32 32 0 0 1-32-32V128a32 32 0 0 1 32-32"
      ></path>
      <path
        fill="currentColor"
        d="M320 288V128h64v352h256V128h64v160h160v64H704v128h160v64H704v128h160v64H704v160h-64V544H384v352h-64V736H128v-64h192V544H128v-64h192V352H128v-64z"
      ></path>
    </svg>
  </div>
  <svg
    xmlns="http://www.w3.org/2000/svg"
    width="24"
    height="24"
    viewBox="0 0 24 24"
  >
    <path
      fill="#ca2b2b"
      d="M19.5 7q-.213 0-.357-.144T19 6.5V5h-1.5q-.213 0-.356-.144T17 4.499t.144-.356T17.5 4H19V2.5q0-.213.144-.356T19.501 2t.356.144T20 2.5V4h1.5q.213 0 .356.144t.144.357t-.144.356T21.5 5H20v1.5q0 .213-.144.356T19.499 7M11 16.73q1.567 0 2.649-1.081T14.731 13t-1.082-2.649T11 9.269t-2.649 1.082T7.269 13t1.082 2.649T11 16.731m0-1q-1.165 0-1.948-.783T8.269 13t.783-1.948T11 10.269t1.948.783t.783 1.948t-.783 1.948t-1.948.783M3.616 20q-.691 0-1.153-.462T2 18.384V7.616q0-.691.463-1.153T3.616 6h2.957l1.366-1.485q.22-.238.533-.376Q8.783 4 9.125 4h4.99q.213 0 .357.144t.144.356v1.673q0 .505.353.858t.858.354h.789v.788q0 .505.353.858t.858.353H19.5q.213 0 .356.144t.144.357v8.5q0 .69-.462 1.153T18.384 20z"
    />
  </svg>
  <svg
    xmlns="http://www.w3.org/2000/svg"
    width="24"
    height="24"
    viewBox="0 0 24 24"
  >
    <path
      fill="currentColor"
      d="M12 4.25q.325 0 .538-.213t.212-.537t-.213-.537T12 2.75t-.537.213t-.213.537t.213.538t.537.212M18 23q-2.075 0-3.537-1.463T13 18t1.463-3.537T18 13t3.538 1.463T23 18t-1.463 3.538T18 23m-.5-2h1v-2.5H21v-1h-2.5V15h-1v2.5H15v1h2.5zM7 9h10V7H7zm4.675 12H5q-.825 0-1.412-.587T3 19V5q0-.825.588-1.412T5 3h4.2q.325-.9 1.088-1.45T12 1t1.713.55T14.8 3H19q.825 0 1.413.588T21 5v6.7q-.725-.35-1.463-.525T18 11q-.275 0-.513.012t-.487.063V11H7v2h6.125q-.45.425-.812.925T11.675 15H7v2h4.075q-.05.25-.062.488T11 18q0 .825.15 1.538T11.675 21"
    />
  </svg>
  自定义
  <el-icon :size="100" color="#333333">
    <Ca />
  </el-icon>
  <el-divider></el-divider>
  <el-button type="primary" size="default" @click="changeLang1">html</el-button>
  <el-button type="primary" size="default" @click="changeLang2">js</el-button>
  <codemirror
    v-model="code"
    placeholder="Code goes here..."
    :style="{ height: '400px', width: '800px' }"
    :autofocus="true"
    :indent-with-tab="true"
    :tab-size="2"
    :extensions="extensions"
    @ready="handleReady"
    @change="handleChange"
    @focus="handleFocus"
    @blur="handleBlur"
    @update="handleStateUpdate"
  />
</template>

<script setup>
import Ca from "../icons/Ca.vue";
import { Codemirror } from "vue-codemirror";
import { javascript } from "@codemirror/lang-javascript";
import { html } from "@codemirror/lang-html";
import { oneDark } from "@codemirror/theme-one-dark";
const code = ref(``);

// const extensions = [javascript(), oneDark];
const extensions = shallowRef([html()]);

const handleReady = (payload) => {
  console.log("已准备", payload);
};
const handleChange = (codeContent) => {
  console.log("改变", codeContent);
};
const handleFocus = (data) => {
  console.log("聚焦", data);
};
const handleBlur = (data) => {
  console.log("失焦", data);
};

const handleStateUpdate = (viewUpdate) => {
  console.log("更新", viewUpdate);

  // // selected
  // const ranges = viewUpdate.state.selection.ranges;
  // state.selected = ranges.reduce(
  //   (plus, range) => plus + range.to - range.from,
  //   0
  // );
  // state.cursor = ranges[0].anchor;
  // // length
  // state.length = viewUpdate.state.doc.length;
  // state.lines = viewUpdate.state.doc.lines;
};

const changeLang1 = () => {
  extensions.value = [html()];

  console.log(extensions.value);
};

const changeLang2 = () => {
  extensions.value = [javascript()];

  console.log(extensions.value);
};
</script>
